<template>
  <div class="view-container workOvertimeList">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>流程监控</span>
        </div>
        <div class="header-form">
          <!--头部搜索  -->
<!--          <el-form :inline="true" :model="pageuser" class="demo-form-inline">
            <el-form-item label="请假人名">
              <el-input v-model="pageuser.name" placeholder="请假人名"></el-input>
            </el-form-item>
            <el-form-item label="类别">
              <el-select v-model="pageuser.qjtype" placeholder="类别">
                <el-option label="类别一" value="1"></el-option>
                <el-option label="类别二" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="pageuser.letterState" placeholder="状态">
                <el-option
                  v-for="item in seleData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="fetchData">查询</el-button>
            </el-form-item>
          </el-form>-->
          <!--搜索-->

          <!--          <div class="header-form-item">
                      <el-button type="success" icon="el-icon-s-check" @click="doApproval">审批</el-button>
                    </div>-->
          <div class="header-form-item">
            <el-select v-model="searchForm.letterState" placeholder="状态" @change="fetchData">
              <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-select v-model="searchForm.qjtype" placeholder="请假类型" @change="fetchData">
              <el-option v-for="item in qingJiaTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-input v-model="searchForm.name" placeholder="请假人" @input="AntiShake"></el-input>
          </div>
        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
      >
        <el-table-column prop="qingJiaRenName" label="请假人" align="center" width="100"/>
        <el-table-column prop="qjyy" label="请假原因" align="left">
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.qingJiaId)">{{s.row.qjyy}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable prop="qjtype" label="请假类型" align="center" width="110"/>
        <el-table-column sortable prop="qjstime" label="开始时间" :formatter="qjstimeFmt" width="150" align="center"/>
        <el-table-column sortable prop="qjetime" label="结束时间" :formatter="qjetimeFmt" width="150" align="center"/>
        <el-table-column sortable prop="stateName" label="状态" align="center" width="100">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

<!--    <div class="block">

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="longs">
    </el-pagination>
  </div>-->
  </div>
</template>

<script>
  import qingJiaAPI from '@/api/qingJia/qingJia'
  import listMixin from '@/mixin/listMixin'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'

  export default {
    name: 'QingJiaLcheng',
    mixins:[listMixin,flowManagerListMixin],
    data() {
      return {
        searchForm:{
          name:'',
          letterState:'',
          qjtype:''
        },
        stateList:[],
        qingJiaTypes:[
          {label:'病假',value:1},
          {label:'事假',value:2},
          {label:'产假',value:3},
        ]

      }
    },
    created() {
      this.getStateList()
    },
    computed: {

    },
    methods: {
      showDetail(id) {
        this.$router.push('/work-qingjia/approval-detail/' + id + '/' + false)
      },

      fetchData() {
        qingJiaAPI.getliuChengJianKongList(
          this.searchForm.letterState,
          this.searchForm.name,
          this.searchForm.qjtype,
          this.page.index,
          this.page.size
        ).then(res => {
          console.log('qingJiaAPI.getliuChengJianKongList',res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },

      getStateList(){
        qingJiaAPI.stateList().then(res=>{
          // console.log(res)
          this.stateList = res.result
        })
      },
      qjstimeFmt(row) {
        return this._util.format(row.qjstime)
      },
      qjetimeFmt(row) {
        return this._util.format(row.qjetime)
      }
    }
  }
</script>

<style lang="scss">
  .block{
    text-align: center
  }
</style>

